<template>
  <div class="content">
    <div class="top" @click="$router.go(-1)">
      <img src="~@/assets/images/login/back.png"/>
      <span>找回密码</span>
    </div>
    <div class="hello">
      <span>找回登录密码</span>
    </div>
    <div class="inputs">
      <div class="border">
        <div class="phoneLeft">
          <img class="phone" src="~@/assets/images/login/phone.png"/>
          <span class="qh">{{data.regionNo}}</span>
          <img class="arrow" src="~@/assets/images/login/arrow.png"/>
          <div class="line"></div>
        </div>
        <input v-model="data.phoneNumber" placeholder="请输入您的手机号" />
      </div>
      <div class="border">
        <img src="~@/assets/images/login/yzm.png"/>
        <input v-model="data.smsCode" placeholder="请输入验证码" :type="passShow?'text':'password'" />

        <button v-if="remainingTime==60" @click="getSmsCode" class="yzm">获取验证码</button>
        <button v-else class="yzm yzm2">{{remainingTime}}s</button>
      </div>
      <div class="border">
        <img src="~@/assets/images/login/password.png"/>
        <input
          v-model="data.password"
          placeholder="请设置您的登录密码"
          :type="passShow?'text':'password'"
          clearable
        />
        <img class="icon" @click="passShow=!passShow" :src="require(`@/assets/images/login/${passShow?'show':'hide'}.png`)" />
      </div>
      <div class="border">
        <img src="~@/assets/images/login/password.png"/>

        <input
          v-model="data.repeatPassword"
          placeholder="请再次设置登录密码"
          :type="passShow?'text':'password'"
          clearable
        />
        <img class="icon" @click="passShow=!passShow" :src="require(`@/assets/images/login/${passShow?'show':'hide'}.png`)" />
      </div>
    </div>
    <van-button class="button" :loading="loading" @click="ok">提交</van-button>
    <!-- <div class="text1">点击注册代表您同意<span>《服务条款》</span></div> -->
    <div class="bottom">
      <a class="kf" target="_blank" :href="baseData.data.online">联系客服</a>
    </div>
  </div>
</template>

<script>
import StorageModel from "@/utils/storage";
const Storage = new StorageModel();
import { AUTH } from "@/utils/constant";
import { Toast } from 'vant';
import login from "@/api/login";
import api from "@/api";
import { mapState, mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      captchaCode: "",
      captchaIns: "",

      remainingTime: 60, // 初始倒计时60秒
      timer: null, // 计时器
      loading: false,
      passShow: false,
      password: "",
      data: {
        "regionNo": "+86",
        "phoneNumber": "",
        "smsCode": "",
        "smsToken": "",
        "password": "",
        "repeatPassword": "",
      },
    };
  },
  watch: {},
  computed: {
    ...mapState({
      baseData: state => state.global.baseData
    }),
  },
  methods: {
    ...mapActions({
      getBaseData: "global/getBaseData",
    }),
    getSmsCode(){
      if(!this.data.phoneNumber){
        this.$toast("请输入手机号");
        return false;
      }
      login.smsCaptcha({
        "regionNo": this.data.regionNo,
        "phoneNumber": this.data.phoneNumber,
      }).then(res => {
        if(res.data.code === 0){
          this.$toast("验证码已发送");
          this.data.smsToken = res.data.data.smsToken;
          this.startCountdown()
        }
      });
      //
    },
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--;
        } else {
          this.clearCountdown();
        }
      }, 1000);
    },
    clearCountdown() {
      this.remainingTime = 60;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    ok(){
      if(!this.data.phoneNumber){
        this.$toast("请输入手机号");
        return false;
      }
      if(!this.data.smsCode){
        this.$toast("请输入验证码");
        return false;
      }
      if(!this.data.password){
        this.$toast("请输入密码");
        return false;
      }
      if(!this.data.password){
        this.$toast("请再次输入密码");
        return false;
      }
      this.captchaIns.show();
    },
    handle(xtoken){
      api.setXToken(xtoken);
      login.retrievePassword(this.data).then(res => {
        this.loading = true;
        if(res.data.code === 0){
          Toast.success('密码重置成功，请重新登录！');
          setTimeout(() => {
            this.$router.push("/login");
          }, 500);
        }else{
          Toast({
            className: 'toastClass',
            message: res.data.message,
            icon: 'cross',
          });
        }
        this.captchaIns.hide();
        this.reloadVode();
        this.loading = false;
      });
    },
    reloadVode() {
      this.captchaCode = "";
      this.captchaIns && this.captchaIns.reload();
    },
  },
  mounted() {
    if(Storage.get(AUTH)){
      logout()
    }
    if(!this.baseData){
      this.getBaseData()
    }
    // 网盾
    let self = this;
    this.captchaIns = _dx.Captcha(document.getElementById("captcha"), {
      appId: "4841b7b1fafa733c1d940a468cf022af",
      apiServer: "https://api-pro.dingxiang-inc.com",
      style: "popup",
      success:  (xtoken) => {
        self.captchaCode = xtoken;
        self.$nextTick(() => {
          self.handle(xtoken);
        });
      },
    });
  },
  beforeDestroy() {
    this.clearCountdown();
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
.content{
  background-image: url('../assets/images/login/bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 15px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  position: relative;
  overflow: auto;
  .top{
    position: relative;
    text-align: center;
    img{
      width: 10px;
      height: 18px;
      position: absolute;
      left: 0;
      top: 10px;
    }
    span{
      font-size: 16px;
      font-weight: Medium;
      text-align: center;
      color: #222222;
      line-height: 22.5px;
    }
  }
  .hello{
    margin-top: 45px;
    margin-bottom: -13px;
    display: flex;
    flex-direction: column;
    span{
      font-size: 16px;
      font-weight: Medium;
      color: #222222;
      line-height: 25px;
      margin-top: 2px;
    }
  }
  .inputs{
    padding-top: 10px;
    .border{
      width: 100%;
      height: 50px;
      background: #ffffff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      margin-top: 20px;
      position: relative;
      .phoneLeft{
        display: flex;
        align-items: center;
        .phone{
          width: 19px;
          height: 19px;
        }
        .qh{
          margin-left: 10px;
          font-size: 14px;
          color: #222222;
          line-height: 20px;
        }
        .arrow{
          width: 11px;
          height: 7px;
          margin-left: 10px;
        }
        .line{
          width: 1px;
          height: 15px;
          background: #9eacb3;
          margin-left: 10px;
          margin-right: 5px;
        }
      }
      img{
        width: 19px;
        height: 19px;
        margin-left: 16px;
      }
      input{
        border: none;
        background: none;
        margin-left: 6px;
        font-size: 14px;
        outline: none;
        width: 100%;
        line-height: 50px;
      }
      .icon{
        width: 20px;
        height: 13px;
        margin: 0;
        position: absolute;
        right: 15px;
        top: 18px;
      }
      .yzm{
        position: absolute;
        right: 15px;
        top: 18px;
        text-align: center;
        height: 20px;
        font-size: 14px;
        color: #479fff;
        line-height: 20px;
        border: none;
        background: none;
      }
      .yzm2{
        color: #AFB1B3;
      }
    }
  }
  .button{
    margin-top: 20px;
    height: 50px;
    background: #479fff;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    line-height: 50px;
    display: block;
    border: none;
    width: 100%;
  }
  /deep/.van-button--disabled{
    background: lightgray;
  }
  .bottom{
    position: absolute;
    bottom: 30px;
    text-align: center;
    // left: calc(50% - 42px);
    width: calc(100% - 30px);
    .kf{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #479fff;
      line-height: 20px;
      &:before{
        content: ' ';
        display: block;
        width: 19px;
        height: 19px;
        background-image: url('../assets/images/login/kf.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-right: 8px;
      }
    }
  }
  .text1{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: Regular;
    text-align: center;
    color: #8f949c;
    line-height: 20px;
    margin-top: 24px;
    span{
      color: #479FFF;
    }
  }
}
</style>
